<template>
  <!-- Index.vue -->
  <div>
    <posts-list />
    <pagination />
  </div>
</template>

<script>
import PostsList from '@/components/layout/PostsList.vue';
import Pagination from '@/components/layout/Pagination.vue';

// import { mapState } from "vuex";

export default {
  created() {
    this.load(this.$route.params);
  },
  beforeRouteUpdate(to, from) {
    this.load(to.params);
  },
  beforeRouteLeave(to, from) {
    if (to.name.indexOf('Index') > -1) {
      this.load(to.params);
    }
  },
  computed: {
    // ...mapState({ cache: (state) => state.cache }),
  },
  components: {
    PostsList,
    Pagination,
  },
  methods: {
    load(params, type = '') {
      // this.$_log('[Index-Load]', params, type);
      const query = ((params) => {
        if (!params.type) {
          return params;
        }
        const page = params.page == '' ? 1 : params.page;
        switch (params.type) {
          case 'category':
            return { cate_id: params.slug, page };
          case 'tag':
            return { tag_id: params.slug, page };
          case 'date':
            return { date: params.slug, page };
          case 'search':
            return { search: params.slug, page };
        }
      })(params);
      this.$store.commit('saveCacheQuery', query);
      this.$store.dispatch('getPosts', query);
    },
  },
};
</script>
